<template>
    <!-- @focus="focusEvent" -->
    <el-select collapse-tags collapse-tags-tooltip @change="changeEvent" :multiple="true" filterable clearable
        :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)"
        placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useSearchItemComposable } from './minxin'

// Props
const props = defineProps({
    modelValue: {
        type: Array,
        default: () => []
    },
    row: {
        type: Object,
        default() {
            return {}
        }
    },
    field: {
        type: String,
        default: ''
    }
})

// Emits
const emit = defineEmits(['update:modelValue', 'changeEvent'])

// Composables
const { init, changeEvent: baseChangeEvent } = useSearchItemComposable()

// Reactive data
const loading = ref(false)
const configFormItem = ref(null)
const options = ref([])
const selectConfig = ref({
    key: "",
    text: ""
})

// Computed
const configOptions = computed(() => {
    let _configOptions = {}
    try {
        _configOptions = props.row.controlOptions
    } catch (error) {
        _configOptions = {}
    }
    return _configOptions
})

// Lifecycle
onMounted(() => {
    init()
    focusEvent()
})
// Methods
const focusEvent = (params) => {
    // debugger
    // 初始化 下拉配置信息
    if (options.value.length == 0) {
        if (configOptions.value) {
            configFormItem.value = configOptions.value
            if (configFormItem.value.hasOwnProperty('CDATAS') && !!configFormItem.value.CDATAS) {
                getSelectKeyText(configFormItem.value.CDATAS)
            }
        }
        loadSelectOptions()
    }
}

// 获取配置的KEY & TEXT
const getSelectKeyText = (dataList) => {
    if (dataList && dataList.length > 0) {
        dataList.forEach(item => {
            if (!!item.isSelectTextField) {
                selectConfig.value.text = item.field
            }
            if (!!item.isSelectKeyField) {
                selectConfig.value.key = item.field
            }
        })
    } else {
        selectConfig.value = {
            key: "",
            text: ""
        }
    }
}

// 设置下拉初始化功能
const loadSelectOptions = () => {
    let optionList = [{ value: "", label: "请选择" }]
    if (configFormItem.value.CDATAS && configFormItem.value.CDATAS.length > 0) {
        configFormItem.value.CDATAS.forEach(oldItem => {
            let newItem = {
                value: oldItem.field,
                label: !!oldItem.title ? oldItem.title : oldItem.field
            }
            optionList.push(newItem)
        })
    }
    options.value = optionList
}

// 格式化返回数据
const formatDatas = (dataList) => {
    let optionsList = [{ value: "", label: "请选择" }]
    if (dataList && dataList.length > 0) {
        dataList.forEach(oldItem => {
            if (!!oldItem[selectConfig.value.text]) {
                let newItem = {
                    value: oldItem[selectConfig.value.key],
                    label: oldItem[selectConfig.value.text]
                }
                optionsList.push(newItem)
            }
        })
    }
    return optionsList
}

// 选择改变触发事件
const changeEvent = (val) => {
    emit('update:modelValue', val)
    baseChangeEvent(val)
    let params = {
        value: val,
        type: 'change'
    }
    emit("changeEvent", params)
}

</script>